<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$databasename}::数据库字典</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        ul,ol{
            list-style: none;
        }
        .lists{
            overflow: hidden;
            margin: 20px 100px;
        }
       .lists > li{
           /*float: left;*/
           /*margin-right: 20px;*/
           overflow: hidden;
           margin:20px 0;
       }
        .lists > li a{
            padding:2px 6px;
        }
        .lists > li .txt{
            /*margin-right:20px;*/
            width:60%;
            float: left;
        }
        .lists > li .t1{
            width:20%;
            font-weight:600;
            font-size:20px;
        }
        .clearfix{
            height:30px;
            overflow: hidden;
        }
        .lists > li .t2{
            width:20%;
        }
        .box-wrap{
            display: none;
            clear: both;
            margin:50px;
            border:1px solid #ddd;
            transition: all  0.1s;
        }
        .table{
            width:100%;
        }
        .table tbody td,
        .table thead th{
            padding:8px;
        }
        .table tbody td{
            border-top: 1px solid #ddd;
        }
    </style>
</head>
<body>
<ul class="lists">
{volist name="rows" id="vo"}
    <li>
        <div class="clearfix">
            <div class="txt t1">{$vo.TABLE_COMMENT}({$vo.TABLE_NAME})</div>
            <div class="txt">引擎:{$vo.ENGINE} 字符集:{$vo.TABLE_COLLATION} 时间:{$vo.CREATE_TIME}</div>
            <div class="txt t2"><a href="javascript:;" onclick="ajax('{$vo.TABLE_NAME}')">展开</a></div>
        </div>
        <div class="box-wrap {$vo.TABLE_NAME}">
            <table class="table">
                <thead>
                <tr>
                    <th>字段名</th>
                    <th>索引</th>
                    <th>默认值</th>
                    <th>数据类型</th>
                    <th>字符集</th>
                    <th>自增</th>
                    <th>说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <!--<li><a href="javascript:;">{$vo.TABLE_NAME}</a></li>-->
    <!--<li><a href="javascript:;">{$vo.ENGINE}</a></li>-->
    <!--<li><a href="javascript:;">{$vo.CREATE_TIME}</a></li>-->
    <!--<li><a href="javascript:;">{$vo.UPDATE_TIME}</a></li>-->
    <!--<li><a href="javascript:;">{$vo.TABLE_COLLATION}</a></li>-->
    <!--<li><a href="javascript:;">{$vo.TABLE_COMMENT}</a></li>-->

{/volist}
</ul>
<script>
//    location.href='/index/table/showfield/tablename/bro_user'
    function ajax(arg){
        if(!arg){
            return false;
        }
        var ele=document.querySelector('.'+arg + ' tbody'),
            ele1=document.querySelector('.'+arg);
        if(ele1.classList.contains('hhh') && ele1.style.display === 'block'){
            ele1.style.display='none';
            return false;
        }else if(ele1.classList.contains('hhh')){
            ele1.style.display='block';
            return false;
        }
        var http=new XMLHttpRequest();
        http.open('get','/admin/table/showfield/tablename/'+arg,true);
        http.onreadystatechange=function(){
            if(http.readyState == 4 && http.status == 200){
                var text=http.responseText || '';
                text=JSON.parse(text);
                var arr=[];
                text.forEach(function(item){
                    arr.push('<tr>');
                   arr.push('<td>'+item.COLUMN_NAME+'</td>');
                   arr.push('<td>'+item.INDEX_NAME+'</td>');
                    arr.push('<td>'+item.COLUMN_DEFAULT+'</td>');
                    arr.push('<td>'+item.COLUMN_TYPE+'</td>');
                    arr.push('<td>'+item.COLLATION_NAME+'</td>');
                    arr.push('<td>'+item.EXTRA+'</td>');
                    arr.push('<td>'+item.COLUMN_COMMENT+'</td>');
                    arr.push('</tr>');
                });
                ele1.style.display='block';
                ele1.classList.add('hhh');
                ele.innerHTML=arr.join('');
            }
        };
        http.send();
    }
</script>
</body>
</html>